<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 一、localStorage
    // 作用：可以将数据永久存储在本地（用户的电脑，浏览器），除非手动删除，否则关闭页面也会存在
    // 特性：
    // -->可以多窗口（页面）共享（同一浏览器可以共享）
    // -->以键值对的形式存储使用
    // 语法：
    // 1.存储数据：localStorage.setItem(key,value)
    // 2.获取数据：localStorage.getItem(key)  //都加引号
    // 3.删除数据：localStorage.removeItem(key)  //都加引号

    // 二、sessionStorage
    // 特性：
    // -->生命周期为关闭浏览器窗口
    // -->在同一个窗口（页面）下数据可以共享
    // -->以键值对的形式存储使用
    // -->用法跟localStorage基本相同

    // 重点注意：本地存储只能存储字符串数据类型

    // 1.增  要存储一个名字 'uname','lishenghao'
    // localStorage.setItem('键', '值')
    localStorage.setItem('uname', 'lishenghao')
    // 2.查  获取方式  都加引号
    console.log(localStorage.getItem('uname'))
    // 3.删  删除本地存储  只删除名字(键)
    localStorage.removeItem('uname')
    // 4.改  还是那句话:原本有了就该,没有就是增
    localStorage.setItem('uname', 'cxk')
    console.log(localStorage.getItem('uname'))

    // 我要存储一个年龄
    // 重点注意：本地存储只能存储字符串数据类型
    localStorage.setItem('age', 18)
    console.log(localStorage.getItem('age'))  //颜色不同,是字符串
    console.log(18)  //数字型
  </script>
</body>

</html>